<template>
    <div>
        <header-tm></header-tm>
        <div class="con" v-html="list.data.content"></div>
        <div class="topicTui">
            <div class="title">专题推荐</div>
            <div class="item" v-for="item in list.recommendList" :key="item.id">
                <img :src="item.scene_pic_url" alt="">
                <p>{{item.title}}</p>
            </div>
        </div>
    </div>
</template>
<script>
import Head from "../components/Header";
import { mapState } from 'vuex'
import { detailaction } from '../../../api/topic/index'
export default {
    data() {
        return {
            id:"",
            list:{data:{content:""}}
        }
    },
    methods: {
        init() {
            detailaction({id:JSON.parse(this.$route.query.id)}).then(res=>{
                console.log(res);
                this.list = res
            })
        }
    },
    mounted() {
        this.init()
    },
    computed: {
        ...mapState(['topicId'])
    },
    components: {
    "header-tm": Head,
  },
}
</script>
<style lang="scss" scoped>

</style>
<style lang="scss">
.con {
    img {
        display: block;
        width: 100%;
    }
}
.topicTui {
    .title {
        color: #999;
        padding: 15px 0;
        margin: 15px 0;
        font-size: 15px;
    }
    .item {
        padding: 12px 12px 15px;
        margin-bottom: 15px;
        background-color: #fff;
        img {
            width: 100%;
            height: 139px;
        }
        p {
            font-size: 14px;
            color: #000;
        }
    }
}
</style>